<template>
  <a-modal 
    class="check-phone"
    :visible="visible"
    okText="验证" 
    cancelText="关闭"
    :title="title"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    width="600px"
    :confirmLoading="confirmLoading"
    @cancel="closeModal()" 
    @ok="handleSubmit">
    <p>为保障您的账户安全,需要进行短信验证.</p>
    <p style="margin-bottom: 20px">验证码将发送至银行卡预留手机号: +86-{{values.phone | $hiddenPhone}}</p>
    <a-form :form="form"  :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      
      <a-form-item label="验证码" class="search-input">
        <a-input-search @search="getCode" :max-length="6" v-decorator="['smsCode', { rules: smsRules }]" placeholder="请填写短信验证码" >
          <a-button :loading="btnLoading" type="primary" slot="enterButton" v-if="timeoutText === '获取验证码'">{{timeoutText}}</a-button>
          <a-button :disabled="true" type="link" slot="enterButton" v-else>{{timeoutText}} s</a-button>
        </a-input-search>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
export default {
  name: 'check-reserved-phone',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    values: {
      type: Object,
      default: true
    },
  },
  computed: {
    title () {
      return '短信验证'
    },
    
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
      confirmLoading: false,
      btnLoading: false,
      timer: null,
      timeoutText: '获取验证码',
      smsRules: [
        {required: true, message: '请输入验证码'},
        {pattern: /^\d{4,6}$/, message: '请输入正确的验证码'},
      ],
    }
  },
  watch: {
    visible (value) {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      this.timeoutText = '获取验证码'
      this.btnLoading = false
      if (value) {
      }
    }
  },
  methods: {
    setTimer () {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      if (!+this.timeoutText || +this.timeoutText <= 0) {
        this.timeoutText = '获取验证码'
        return
      }
      this.timer = this.setTimeout(() => {
        this.timeoutText --
        this.setTimer()
      }, 1000);
    },
    getCode () {
      this.btnLoading = true
      this.$post('/bank/card/sms/addbank/send', {phoneNumber: this.values.phone}).then(res => {
        this.btnLoading = false
        if (res && res.returnCode === 1000) {
          this.$message.success('发送成功！')
          this.timeoutText = 120
          this.setTimer()
        }
      }).catch(err=> {
        this.btnLoading = false
      })
    },
    handleSubmit () {
      this.confirmLoading = true
      this.form.validateFields((err, values) => {
        if (!err) {
          this.closeModal(values)
          this.confirmLoading = false
        } else {
          this.confirmLoading = false
        }
      });
    },
    
    closeModal (values) {
      this.form.resetFields()
      this.$emit('cancel', values)
    }
  }
}
</script>
<style lang="less">

.check-phone {
  .search-input {
    .ant-input {
      border-radius: 4px!important;
      border: 1px solid #d9d9d9!important;
    }
    .ant-input-search-button {
      margin-left: 10px!important;
      border-radius: 4px!important;
    }
  }
}
</style>